<template>
  <uni-nav-bar leftWidth="168rpx" :fixed="props.option.fixed" :backgroundColor="props.option.backgroundColor" :title="props.option.title" :color="props.option.color || '#333333'" :border="props.option.border" :statusBar="true">
    <template #left>
      <view class="nav-bar-left" :class="props.option.noBg ? '' : 'has-bg'">
        <view @click="clickLeft('')" class="u-center" style="height:100%;width: 40%;justify-content: flex-start;">
          <img :src="iconStyleArrow" class="img">
        </view>
        <view class="line" v-if="!props.option.noBg"></view>
        <view class="u-center" style="height:100%;width: 40%;justify-content: flex-end;" @click="clickLeft('home')" v-if="!props.option.noHomeIcon">
          <img :src="iconStyleHome" class="img">
        </view>
      </view>
    </template>
    <slot></slot>
  </uni-nav-bar>
</template>

<script setup>
import { computed, getCurrentInstance } from 'vue'
const props = defineProps({
  option: {
    type: Object,
    default: () => {}
  }
})
const _getCurrentInstance = getCurrentInstance()
const iconStyleArrow = computed(() => {
  return props.option.iconType === 'black' ? 'https://img.qumoyugo.com/webimgbg/pets-icon-left-arrow-black.png' : 'https://img.qumoyugo.com/webimgbg/pets-icon-left-arrow.png'
})
const iconStyleHome = computed(() => {
  return props.option.iconType === 'black' ? 'https://img.qumoyugo.com/webimgbg/pets-icon-home-black.png' : 'https://img.qumoyugo.com/webimgbg/pets-icon-home-1.png'
})

const clickLeft = (type) => {
  _getCurrentInstance.appContext.config.globalProperties._isSearchTag = false
  if (type) {
    uni.switchTab({
      url: '/pages/index'
    })
  } else {
    // eslint-disable-next-line no-undef
    if (getCurrentPages().length === 1) {
      uni.switchTab({
        url: '/pages/index'
      })
    } else {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
  .nav-bar-left{
    width: 168rpx;
    height: 66rpx;
    border-radius: 33px;
    padding: 0 18rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rpx;
    &.has-bg{
      background: rgba(0, 0, 0, 0.1);
      border:1px solid rgba(204, 204, 204, 0.52);
    }
    .img{
      height: 36rpx;
      width: 36rpx;
    }
    .line{
      width: 1px;
      height: 36rpx;
      background: rgba(204, 204, 204, 0.55);
    }
  }
</style>
